<!DOCTYPE html>
<html>
  <head>
    <base>
    <meta charset="UTF-8">
    <title>HTML第二章</title>
    <link rel="stylesheet" type="text/css" href="./css/base.css" />
    <!-- <link rel="shortcut icon" type="image/ico" href="https://www.baidu.com/favicon.ico" /> -->
    <style type="text/css">
      body{
        /* background-color: black; */
        /* color: #ffffff; */
      }
    </style>
  </head>
  <body class="body-wrap">
    <!-- 这是注释内容 -->
    <!-- 顶部区域 -->
    <header>

    </header>
    <!-- 内容区域 -->
    <main>
      <form>
        <label>姓名：<input type="text" placeholder="请输入姓名"></label>
        <label>年龄：<input disabled></label>
        <label>性别：
          <input type="radio" name="sex" value="">男
          <input type="radio" name="sex" value="">女
          <select>
            <option label="男" value="1"></option>
            <option value="2">女</option>
          </select>
        </label>
        <label>爱好：
          <input type="checkbox" name="a" value="">篮&nbsp;&nbsp;球
          <input type="checkbox" name="a" value="">排球
          <input type="checkbox" name="a" value="">唱歌
          <input type="checkbox" name="a" value="">跳舞
          <select multiple>
            <option label="唱" value="1"></option>
            <option label="跳" value="2"></option>
            <option label="RAP" value="3"></option>
            <option label="打篮球" value="4"></option>
          </select>
        </label>
        <label>生日：<input type="datetime-local"></label>
        <label>年龄：<input></label>
        <label>颜色：<input type="color"></label>
        <label>密码：<input type="password"></label>
        <label>建议：<textarea></textarea></label>
        
        <input type="button" value="提交">
        <button>上传</button>
      </form>
      <span title="第一行的title" class="">第一行</span><span>第二行</span>
      <!-- <br /> -->
      <span style="display: block;">第三行</spans>
      <div contenteditable="true" style="visibility:hidden; width:100px; height:100px; background-color: black; color: white;"></div>
      <div hidden contenteditable="true" style="width:100px; height:100px; background-color: black; color: white;"></div>
      <div style="display: none; width:100px; height:100px; background-color: red; color: white;"></div>
      <div draggable="true" contenteditable="true" style="width:100px; height:100px; background-color: red; color: white;"></div>


      <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
      </dl>

      <table border="" cellpadding="" width="100%">
        <thead>
          <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>性别</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>202302160001</td>
            <td>男</td>
            <td>22</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>202302160002</td>
            <td>男</td>
            <td>20</td>
          </tr>
          <tr>
            <td>老王</td>
            <td>202302160003</td>
            <td>男</td>
            <td>28</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>合计</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tfoot>
      </table>
      <!-- <img alt="baidu" src="https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"> -->

      <iframe width="100%" height="500px" src="https://www.w3school.com.cn/tags/html_ref_standardattributes.asp"></iframe>
    </main>
    <!-- 底部区域 -->
    <footer>

    </footer>

    <!-- 脚本语句 -->
    <script type="text/javascript">
    </script>
    <!-- 脚本文件 -->
    <script type="text/javascript" src="./js/main.js"></script>
    <style type="text/css">
      form label {
        display: block;
        line-height: 2;
      }
    </style>
  </body>
</html>